<template>
  <div class="bigBox">
    <Ad v-show="Or"></Ad>
    <div class="title">
      <van-icon class="icon" name="wap-home-o" @click="backHome" />
      <div class="text">值得买</div>
      <div class="box">
        <van-icon class="icon" name="search" @click="backSearch"/>
        <van-icon class="icon" name="shopping-cart-o" @click="backShopcart" />
      </div>
    </div>
    <div class="headerNav">
      <img class="bgImg" src="https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView" alt="">
      <div class="box">
        <img class="zdmImg" src="https://yanxuan.nosdn.127.net/0b7676e645253f84be662aacfc051922.png" alt="">
        <div class="headerText">严选好物</div>
        <div class="headerText">用心生活</div>
      </div>
      <van-swipe class="navCentent" show-indicators indicator-color="white" :loop="false" :width="90">
        <van-swipe-item v-for="i in (navList?.length as number || 0) / 2">
          <a :href="(navList![i])?.columnUrl">
            <div class="bannerItem">
              <img class="navImg" :src="(navList![i])?.picUrl" alt="">
              <div class="navTextOne">{{ (navList![i])?.mainTitle }}</div>
              <div class="navTextTwo">{{ (navList![i])?.viceTitle }}</div>
            </div>
          </a>
          <a :href="(navList![i + (navList?.length as number) / 2 - 1])?.columnUrl">
            <div class="bannerItem">
              <img class="navImg" :src="(navList![i + (navList?.length as number) / 2 - 1])?.picUrl" alt="">
              <div class="navTextOne">{{ (navList![i + (navList?.length as number) / 2 - 1])?.mainTitle }}</div>
              <div class="navTextTwo">{{ (navList![i + (navList?.length as number) / 2 - 1])?.viceTitle }}</div>
            </div>
          </a>
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="custom-indicator">
            <div :class="{ bgColor: index === active }" class="indicatorItem"
              v-for="(item, index) in ((navList?.length as number || 0) / 2 - 3 < 0 ? 0 : (navList?.length as number || 0) / 2 - 3)">
            </div>
          </div>
        </template>
      </van-swipe>
    </div>
    <div class="foots">
      <div class="footsHalfway">
        <div class="footsHalfwayItem" v-for="RecOne in ((RecList || [])[0] || {}).topics" :key="parseInt(RecOne.topicId)">
          <a :href="RecOne.schemeUrl"><img class="footsImg" v-lazy="RecOne.picUrl" alt=""></a>
          <div class="footsTitle">{{ RecOne.title }}</div>
          <div class="footsUser">
            <div class="footsUserInfo">
              <img class="userAvatar" v-lazy="RecOne.avatar" alt="">
              <div class="userName">{{ RecOne.nickname }}</div>
            </div>
            <div class="lookNum">
              <van-icon class="icon" name="eye-o" />
              <div class="num">{{ RecOne.readCount > 1000 ? parseInt(`${RecOne.readCount / 1000}`) + 'k' : RecOne.readCount }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="footsHalfway">
        <div class="footsHalfwayItem" v-for="RecOne in ((RecList || [])[1] || {}).topics" :key="parseInt(RecOne.topicId)">
          <a :href="RecOne.schemeUrl"><img class="footsImg" v-lazy="RecOne.picUrl" alt=""></a>
          <div class="footsTitle">{{ RecOne.title }}</div>
          <div class="footsUser">
            <div class="footsUserInfo">
              <img class="userAvatar" v-lazy="RecOne.avatar" alt="">
              <div class="userName">{{ RecOne.nickname }}</div>
            </div>
            <div class="lookNum">
              <van-icon class="icon" name="eye-o" />
              <div class="num">{{ RecOne.readCount > 1000 ? parseInt(`${RecOne.readCount / 1000}`) + 'k' : RecOne.readCount }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, onMounted, onBeforeUnmount } from "vue"
// import type{Element} from 'vue'
import { useRouter, useRoute } from 'vue-router'
export default defineComponent({
  name: 'BeBuy',
})
</script>

<script lang="ts" setup>
import type { navListDataArrItem, Rectopics } from '@/api/beBuy'
import request from '@/api/beBuy'
const Or = ref(true)  //控制顶部广告显示
const navList = ref<navListDataArrItem[]>()
const RecList = ref<Rectopics[]>()
const RecHeight = ref(document.documentElement.offsetHeight)   //楼层的高度,初始就是页面高度
const num = ref(0)   //计数的，计入楼层page
const router = useRouter()   //路由器
//请求轮播图导航数据,轮播图结构特殊，数据不能直接使用
async function getNavList() {
  const res = await request.getNav()
  if (res.code === '200') {
    navList.value = res.data.navList
  }
}
//请求楼层数据
async function getRecList(page: number) {
  const res = await request.getRec(page, 2)
  // console.log(res.data.result)
  if (RecList.value?.length) {
    //不是首次请求，要合并数据
    RecList.value = [{ topics: [...RecList.value[0].topics, ...res.data.result[0].topics] }, { topics: [...RecList.value[1].topics, ...res.data.result[1].topics] }]
  } else {
    // 第一次请求
    RecList.value = res.data.result
  }
}
//监听滚动事件
function reqScroll() {
  window.onscroll = (e) => {
    //滚动时让上方广告消失
    if(Or.value){
      Or.value = false
    }
    // console.log(document.documentElement.scrollTop,RecHeight.value)
    if (document.documentElement.scrollTop > RecHeight.value) {
      getRecList(2 + num.value)  //发获取楼层数据请求
      num.value += 1  //每次执行都加1，作为下一次发请求的参数
      RecHeight.value = document.documentElement.offsetHeight
    }
  }
}
//点击跳转到首页
function backHome() {
  router.push('/home')
}
//点击跳转到购物车
function backShopcart() {
  router.push('/shopcart')
}
//点击跳转到搜索页面
function backSearch(){
  router.push('/search')
}
//改变标题
function changeTitle() {
  // console.log(document.title)
  document.querySelector('title')!.innerText = '值得买'
}
//改变图标
function setupIcon(href:string){
  let linkIcon=document.querySelector('link[rel]');
  // console.log(linkIcon,linkIcon?.classList)
  (linkIcon as HTMLLinkElement).href = href
}
onMounted(() => {
  getNavList()
  getRecList(1)
  reqScroll()
  changeTitle()
  setupIcon('/public/favicon.ico')
})
onBeforeUnmount(()=>{
  setupIcon('/public/favicon2.ico')
})
</script>

<style scoped>
.bigBox {
  background-color: #f4f4f4;
  height: 100%;
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 30px;
  padding: 0 12px;
  width: 375px;
  height: 50px;
  box-sizing: border-box;
  position: fixed;
  background-color: white;
  z-index: 5;
}

.title .text {
  font-size: 18px;
  flex: 1;
  text-align: center;
  margin-left: 37px;
}

.title .box {
  width: 74px;
  display: flex;
  justify-content: space-between;
}

.title .icon {
  font-weight: 100 !important;
}

.headerNav {
  padding-top: 50px;
  position: relative;
  height: 340px;
}

.headerNav .bgImg {
  position: absolute;
  width: 100%;
}

.headerNav .box {
  padding: 6px;
  padding-top: 30px;
  position: absolute;
  display: flex;
  align-items: end;
}

.headerNav .box .zdmImg {
  width: 65px;
}

.headerNav .box .headerText {
  color: white;
  margin: 2px;
  font-size: 15px;
}

.headerNav .navCentent {
  width: 360px;
  position: absolute;
  top: 120px;
  background-color: white;
  border-radius: 10px;
  height: 270px;
  margin-left: 8px;
}

.headerNav .navCentent .bannerItem {
  height: 100px;
  margin-top: 10px;
  text-align: center;
}

.headerNav .navCentent .bannerItem .navImg {
  width: 60px;
  height: 60px;
}

.headerNav .navCentent .bannerItem .navTextOne {
  font-size: 14px;
  height: 20px;
  line-height: 20px;
  color: #333;
  font-weight: bold;
}

.headerNav .navCentent .bannerItem .navTextTwo {
  font-size: 12px;
  height: 15px;
  line-height: 15px;
  color: #999;
  margin-top: 1px;
}

.custom-indicator {
  position: absolute;
  height: 4px;
  /* width: 100px; */
  transform: translateX(50%);
  right: 50%;
  bottom: 5px;
  /* padding: 2px 5px; */
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}

.custom-indicator .indicatorItem {
  width: 20px;
  margin: 0 3px;
  background-color: #999;
}

.bgColor {
  background-color: red !important;
}

.foots {
  /* height: 800px; */
  margin: 8px 8px 0;
  display: flex;
  justify-content: space-between;
  /* flex-direction: column;
  flex-wrap: wrap; */
}

.foots .footsHalfway {
  display: flex;
  flex-direction: column;
}

.foots .footsHalfway .footsHalfwayItem {
  width: 172.5px;
  margin-bottom: 10px;
  border-radius: 10px;
  background-color: white;
}

.foots .footsImg {
  width: 172.5px;
  border-radius: 10px 10px 0 0;
}

.foots .footsTitle {
  padding: 9px 8px 0;
}

.foots .footsUser {
  padding: 8.5px 8px 12px;
  display: flex;
  justify-content: space-between;
}

.foots .footsUser .footsUserInfo {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.foots .footsUser .footsUserInfo .userAvatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
}

.foots .footsUser .footsUserInfo .userName {
  padding-left: 4px;
}

.foots .footsUser .lookNum {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #7f7f7f;
}


.foots .footsUser .lookNum .icon {
  font-size: 16px;
}</style>